<template>
	<view class="user">
		<view class="user-head">
			<div class="head" >
				<div class="head-img">
					<image :src="userInfo.face || '/static/missing-face.png'"></image>
				</div>
				<div class="login-name" v-if="this.nickName">{{nickName}}
					
				</div>
				<div class="login" @click="toLogin()" v-else>登录/注册
					<!-- <img class="setting" src="@/static/set.png" alt="" @click="toSetting"> -->
				</div>
				<!-- <img class="setting" src="@/static/set.png" alt=""> -->
<!-- 				<view class="setting"  @click="toSetting" v-if="this.nickName">
						<image class="setting-icon" src="@/static/set.png" alt="" style="height: 50rpx;width: 50rpx;"></image>
				</view> -->
			</div>

		</view>
		<view class="data">
			<div>
				<div class="num">213</div>
				<div class="data-title">余额</div>
			</div>
			<span class="line"></span>
			<div >
				<div class="num" >21</div>
				<div class="data-title">今日收入</div>
			</div>

		</view>
		<view class="order">
			<view class="today-order">
				<image src="@/static/todayOrder.png" alt="" style="height: 80%; width: 80%;"></image>
			</view>
			<div class="order-title">我的接单</div>
			<div class="order-menu">
				<div class="order-point" v-for="(item,index) in orderList">
					<div class="content-item">
						<view class="item-left" @click="toAvailableOrderFour(item.orderNumber)">
							<view class="border-left">
								<view class="title-name">
									<view class="goods-info">地址：</view>
										<view class="title-intro">
											{{item.orderFromAddress}}
										</view>
									</view>										
							</view>

						</view>
<!-- 						<view class="item-right">
							>
						</view>	 -->							
					</div>
				</div>
			</div>
		</view>
		<view class="other">
			<div class ="other-point" v-for="(item,index) in Other">
				<div class="other-icon">
					<image :src="item.img" style="width: 52rpx;height: 52rpx;"></image>
				</div>
				<div class="other-name">{{item.name}}</div>
			</div>
		</view>
	</view>
</template>

<script>
	// import { getCouponsNum, getFootprintNum } from "@/api/members.js";
	// import { getUserWallet } from "@/api/members";
	import app from "@/App.vue";
	import { listOrder,updateOrder} from "@/api/order";
	export default{
		data(){
			return{
				userInfo:{},
				nickName:null,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderId: undefined,
					orderNumber: undefined,
					postmanPhone: undefined,
					partyPhone: undefined,
					orderParty: undefined,
					orderPostman: undefined,
					orderStatus:undefined,
					orderDept: undefined
				},
				myOrder:[{
					img:'@/static/noFinsh.png',
					name:"小王",
				}],
				orderList:[],
				Other:[]
			}
		},
		onLoad() {},
		onShow() {
			this.nickName=app.globalData.nickName
			console.log(app.globalData.nickName)
			
			var myDate = new Date((new Date).getTime() + 8*60*60*1000);
			var time = myDate.toJSON().split('T').join(' ').substr(0,19);
			this.queryParams.orderDept=app.globalData.deptId
			this.queryParams.createTime=time
			this.queryParams.orderPostman=app.globalData.userId
			console.log(this.queryParams)
			listOrder(this.queryParams).then(res => {
				console.log(res)
			  this.orderList = res.rows;
			  
			})	
		},

		
		mounted() {
			
		},
		methods: {
			toLogin(){
				uni.navigateTo({
				    url: '/pages/login/login'   
				});
			},
			toSetting(){
				uni.navigateTo({
				    url: '/pages/tabbar/user/logout'   
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
html,
body {
  overflow: auto;
}
	.setting {
		width: 50rpx;
		height: 50rpx;
		float: right;
		margin-right: 100rpx;
		margin-top: 25rpx;
	}
.user{
	width: 100%;
	min-height: 1000rpx;
	padding: 156rpx 20rpx 0 20rpx;
	background-color: #F5F6F8;
	background:url(https://jxl-dt-public.oss-cn-hangzhou.aliyuncs.com/4b3b3d02ae1f458591820a799f2225ab.png?attname=&response-content-type=application/octet-stream);
	background-repeat: no-repeat;
	background-size: 100% 426rpx;
	.user-head{
		width: 100%;
		height: 127rpx;
		display: flex;
		justify-content: space-between;
		.head{
			min-width: 321rpx;
			height: 127rpx;
			margin-left: 11rpx;
			display: flex;
			.head-img{
				width: 127rpx;
				height: 127rpx;
				> image{
					max-width: 127rpx;
					max-height: 127rpx;
					border-radius: 50%;
				}
			}
			.login{
				width: 500rpx;
				height: 42rpx;
				margin-top: 25rpx;
				margin-left: 21rpx;
				font-size: 43rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 65rpx;
				
			}
			
		}
		.login-name{
			width: 504rpx;
			height: 42rpx;
			margin-left: 21rpx;
			margin-top: 25rpx;
			font-size: 43rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 65rpx;
			// background-color: #000000;
		}
		.back{
			>img{
				max-width: 19rpx;
				max-height: 34rpx;
			}
		}
		
	}
	.data{
		width: 100%;
		height: 175rpx;
		margin-top: 38rpx;
		background: #FFFFFF;
		// background: linear-gradient(to right, #fdf3da, #fce4b8);
		border: NaNrpx solid #000000;
		border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.line{
			height: 96rpx;
			width: 1rpx;
			border-left: 1rpx solid #000000;
		}
		> div{
			width: 33%;
			height: 96rpx;
			margin: auto;
			text-align: center;
			.num{
				width: 100%;
				height: 33rpx;
				font-size: 37rpx;
				font-family: Bebas;
				font-weight: 400;
				color: #000000;
				text-align: center;
			}
			.data-title{
				width: 100%;
				height: 24rpx;
				margin-top: 15rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;
				text-align: center;
			}
		}
	}
	.order{
		width: 100%;
		height: 208rpx;
		margin-top: 26rpx;
		background: #FFFFFF;
		border: NaNrpx solid #000000;
		border-radius: 15rpx;
		padding: 30rpx 24rpx;
		.order-title{
			display: inline-block;
			width: 130rpx;
			height: 30rpx;
			font-size: 30rpx;
			margin-top: 10rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #000000;
			text-align: left;
		}
		.today-order {

			 float: left;
		}
		.order-menu{
			width: 100%;
			height: 800rpx;
			margin-top: 26rpx;
			display: flex;
			flex-direction: column;
			.order-point{
				margin-top: 20rpx;
				width: 20%;
				height: 96rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.order-icon{
					margin: auto;
					> img{
						max-width: 52rpx;
						max-height: 52rpx;
					}
				}
				.order-name{
					width: 100%;
					height: 24rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}
	.other{
		width: 100%;
		height: 508rpx;
		margin-top: 26rpx;
		margin-bottom: 251rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border: NaNrpx solid #000000;
		border-radius: 15rpx;
		display: flex;
		flex-wrap: wrap;
		.other-point{
			width: 25%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.other-icon{
				margin: auto;
				> img{
					max-width: 52rpx;
					max-height: 52rpx;
				}
			}
			.other-name{
				width: 100%;
				height: 24rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.all-box {
		background-color: #f7f7f7;
	}
	.content-item {
		flex-direction:row; display: flex;
		flex-wrap:wrap;
		width: 100%;
		height: 150rpx;
		padding-bottom: 30rpx;
		padding-left: 8rpx;
	}
	.title-name {

		font-size: 30rpx;
		margin-left: 20rpx;

		width: 100%;
	}
	.show-order-detail {
		display: inline-block;
		float: right;
		color: #4e4eec;
		margin-right: 60rpx;
	}
	.border-left{
		margin-top: 15rpx;
		width: 650rpx;
		border-radius: 10rpx;
		height: 80rpx;
		display: inline-block;
		float: left;

	}
	.clickItem{
		padding-left: 1rpx;
		
	}
	.title-intro {
		overflow : hidden;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 1;  /* 设置超出多少行隐藏 */
	    -webkit-box-orient: vertical;
		padding-right: 20rpx;
		padding-top: 10rpx;
	    display: -webkit-box;
		font-size: 30rpx;
		color: #9a9a9a;
		
	}
	.goods-info{
		display: inline-block;
		float: left;
		padding-top: 10rpx;
	}
	.orders-item {
		width: 92%;
		margin-left: 4%;
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.item-left{
		display: inline-block;
		float: left;
		background-color: #ffbcbc;
		border-radius: 16rpx;
	}
	.item-right{
		float: right;
		font-size: 30rpx;
	}
	.click-img{
		margin-left: 8rpx;

	}
	.click-img img{

		width: 80rpx;
		height: 80rpx;
	}
	.content-one{
		
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		font-size: 18px;
		font-weight: 500;
		color: #000;
	}
	.swiper-content{
		   background-color: #f7f7f7;
		   border-radius: 15px 50px 30px 5px;
		   flex: 1;
		   width: 100%;
		   height: 100%;
	}	
	.swiperitem-content{
	    background-color: #ffffff;
		width: 100%;
	}
	.nav_item{
		border-radius: 15px 50px 30px 5px;
		background-color: #FFFFFF;
		padding:20rpx 40rpx 0rpx 40rpx ;
		
	}
	.nav{
		border-radius: 0 0 1.2em 1.2em;
		background-color: #ffcfc0fa;	
		position: fixed;
		z-index: 991;
		margin-top: -5rpx;
		width: 100%;
		align-items: center;
		height: 260rpx;
	}
	.input-number {
		background-color: #fff;
		width: 450rpx;
		height: 40rpx;
		border-radius: 20rpx;
		margin-top:35rpx;
		margin-left: 120rpx;
		margin-top: 80rpx;
	}
	.tab-scroll{
		/* background-color: #000; */
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		/* margin-top: 100rpx; */
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.tab-scroll_box{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		box-sizing: border-box;
	/* 	height: 100rpx; */
	}
	.tab-scroll_item{
		line-height: 90rpx;
		margin-right: 70rpx;
		margin-left: 10rpx;
		flex-shrink: 0;
		padding-bottom:10px;
		display: flex;
		justify-content: center;
		
		padding-top: 10px;
	}
	.active {
		position: relative;
		font-size: 22px;
		color: #DE0516 ;
		font-weight: 500;
	}
	.active::after {
		content: "";
		font-size: 20px;
		position: absolute;
		width: 130rpx;
		height: 4rpx;
	
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.empty {
	  padding-top: 300rpx;
	  color: #999999;
	  text-align: center;
	  /deep/ .u-image {
	    width: 346rpx;
	    height: 304rpx;
	  }
	  }
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>
